{{--
/**
 * Created by PhpStrom
 * User: 郭碧云
 * Date: 2021/7/7 8:55
 * Desc:
 */--}}
{{--/**
 * Created by PhpStrom
 * User: 郭碧云
 * Date: 2021/3/15 11:32
 * Desc:
 */--}}
@extends('layout.admin')

@section("title")
    分配版本
@endsection

@section('content')
    <link href="{{asset('css/table.css')}}" rel="stylesheet">
    <style>
        .layui-form-label {
            text-align: left !important;
        }

        .layui-input-block {
            margin-left: 148px !important;
        }

        .layui-form-label {
            width: 80px !important;
        }

        .layui-i i {
            font-size: 20px !important;
            margin-left: 25px;
        }
    </style>
    <div class="layui-card-body ">
        <form id="tag_group_edit" style="margin-top: 15px;" method="post"
              action="{{route('admin.category.update.attach.1',['id'=>$info['id']])}}"
              class="layui-form">
            {{csrf_field()}}
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">科目名称</label>
                        <div class="layui-input-block" style="width: 60%;">
                            <input type="text" disabled autocomplete="off" placeholder="请输入名称"
                                   class="layui-input" value="{{$info['name']}}">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width:12% !important;">添加新版本</label>
                        <div class="layui-input-block" style="width: 60%;">
                            <select id="versions" lay-filter="versions">
                                <option value="0">--请选择--</option>
                                @foreach($versions as $version)
                                    <option data-name="{{$version['version']}}"
                                            value="{{$version['id']}}">{{$version["version"]}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    {{--表格显示--}}
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width:100% !important;">已拥有的版本</label>
                        <table id="form-create" class="layui-table" style="width: 78%;text-align: center">
                            <thead>
                            <tr>
                                <th style="text-align: center;">版本编号</th>
                                <th style="text-align: center;">名称</th>
                                <th style="text-align: center;">启用</th>
                                <th style="text-align: center;">默认</th>
                                <th style="text-align: center;">操作</th>
                            </tr>
                            </thead>
                            <tbody class="tagList">
                            @if(empty($info["version"]))
                                <tr class="showNo">
                                    <td colspan="5">
                                        <span>尚未选择</span>
                                    </td>
                                </tr>
                            @else
                                @foreach($info["version"] as $version)
                                    <tr>
                                        <td>{{$version["id"]}}<input style="display: none;" name="data[version_id][]"
                                                                     value="{{$version["id"]}}" type="text"/></td>
                                        <td>{{$version["version"]}}</td>
                                        <td><a class="layui-btn-xs">
                                                <input class="usable" type="checkbox"
                                                       @if($version['pivot']['usable']==1) checked=""
                                                       @endif
                                                       lay-skin="switch"
                                                       lay-text="ON|OFF"  lay-filter="usable">
                                                <input class="layui-hide" name="data[usable][]" type="text"
                                                       value="{{$version['pivot']['usable']}}">
                                            </a></td>
                                        <td><a class="layui-btn-xs layui-i">
                                                <input class="vdefault" type="radio" name="default[]"
                                                       value="{{$version['pivot']['default']}}" lay-filter="default"
                                                       title="" @if($version['pivot']['default']==1) checked="" @endif>
                                                <input class="layui-hide" type="text"
                                                       name="data[default][]" value="{{$version['pivot']['default']}}">
                                            </a></td>
                                        <td>
                                            <button lay-submit="" lay-filter="del" type="button" data-version="{{$version["id"]}}" class="layui-btn layui-btn-xs layui-btn-danger del">删除
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-xs5" style="text-align: right">
                <div class="layui-input-block">
                    <button id="sub" type="submit" class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script>
        layui.use(['form', 'table', 'layer'], function () {
            var table = layui.table,
                form = layui.form;
            form.on("select(versions)", function (data) {
                let element;
                //添加一行
                $(".showNo").remove();
                let id = $("#versions").val();
                let name = $(data.elem).find("option:selected").attr("data-name");
                //排重
                let flag = 0;
                $('input[name="data[version_id][]"]').each(function () {
                    if (id == $(this).val()) {
                        flag++;
                    }
                });
                //选中后移除选中值
                if (id > 0 && flag == 0) {
                    element = $([
                        '<tr>'
                        + '<td>' + id + '<input style="display: none;" name="data[version_id][]" value="' + id + '" type="text"/></td>'
                        + '<td>' + name + '</td>'
                        + '<td><a class="layui-btn-xs">'
                        + '<input class="usable" type="checkbox" checked="" lay-skin="switch" lay-text="ON|OFF" value="on"  lay-filter="usable">'
                        + '<input class="layui-hide" name="data[usable][]" type="text" name="data[usable][]" lay-filter="usable" value="1">'
                        + '</a></td>'
                        + '<td><a class="layui-btn-xs layui-i">'
                        + '<input class="vdefault" type="radio" name="default[]" value="0" title=""  lay-filter="default">'
                        + '<input class="layui-hide" type="text" name="data[default][]" value="0">'
                        + '</a></td>'
                        + '<td>'
                        + '<button type="button" data-version="'+id+'" class="layui-btn layui-btn-xs layui-btn-danger del">删除'
                        + '</button>'
                        + '</td>'
                        + '</tr>',
                    ].join(''));
                    //监听删除
                    element.find('.del').on('click', function () {
                        $(this).parents('tr').remove();
                    })
                }
                flag = 0;
                $('#form-create tbody').append(element)

                //重载表单，启用追加的switch
                form.render();
            });

            //监听数据
            form.on('switch(usable)', function (data) {
                if (data.elem.checked) {
                    data.othis.parent().find("input[type='text']").val(1)
                } else {
                    data.othis.parent().find("input[type='text']").val(0)
                    data.othis.parent().parent().find("input[name='default[]']").attr('disabled', true)
                }
            })

            form.on('radio(default)', function (data) {
                if (data.elem.checked) {
                    $("input[name='data[default][]']").val(0)
                    data.othis.parent().find("input[type='text']").val(1)
                } else {
                    data.othis.parent().find("input[type='text']").val(0)
                }
            })



            {{--$(".del").click(function () {
                let flag="<input name='data[del][]' value='{{$info['id']}}|"+$(this).data("version")+"' style='display: none;'>"
                $(this).parents('tr').append(flag)
                $(this).parents('tr').hide();
            })--}}


            //监听删除
            form.on('submit(del)',function (){
                let flag="<input name='data[del][]' value='{{$info['id']}}|"+$(this).data("version")+"' style='display: none;'>"
                $("#sub").before(flag)
                $(this).parents('tr').remove();
            })


        });
    </script>
@endsection


